<template>
<view>
	<view class="house-detail-info">
        <view class="haed">
			<view class="tite">
				<h2>{{info.title}}</h2>
				<span v-if="info.sell_type == 46" class="sale-one">在售</span>
				
				<span v-if="info.sell_type == 48" class="sale-two">待售</span>
				
				<span v-if="info.sell_type == 47" class="sale-three">售罄</span>
			</view>
			<view class="bd">
				<view class="hd">
					<view class="info-tit">
						<h3>基本信息</h3>
					</view>

					<ul class="infor-list">
						<li>
							<span class="list-l">参考单价:</span>
							<span class="list-r int">{{ info.pagePrice }} </span>
							<!-- <span class="mo">元/m²</span> -->
						</li>

						<li>
							<span class="list-l">参考总价:</span>
							<span class="list-r iot">{{info.pageTotal}}</span>
						</li>
				
						<li>
							<span class="list-l hu">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型:</span>
							<span class="list-r" v-for="(item, index) in info.huxing_info" :key="index" >{{item.title}}({{item.num}})</span>
						</li>

						<li class="qing">
							<span class="list-l">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</span>
							<p class="list-r text"> {{info.qu}} {{info.address}}</p>
						</li>
					</ul>
				</view>
			</view>
        </view>

		<view class="bd">
			<view class="hd">
				<view class="info-tit">
					<h3>销售信息</h3>
				</view>
				<ul class="infor-list">
					<li >
						<span class="list-l">开盘时间</span>
						<span class="list-r">{{info.opening_date}}</span>
					</li>
					
					<li >
						<span class="list-l">交房时间</span>
						<span class="list-r">{{info.delivery}}</span>
					</li>
				</ul>
			</view>
		</view>

		<view class="bd">
			<view class="hd">
				<view class="info-tit">
					<h3>建筑信息</h3>
				</view>
				<ul class="infor-list">
					<li >
						<span class="list-l">开发商</span>
						<span class="list-r">{{ info.dev}} </span>
					</li>
					<li >
						<span class="list-l">绿化率</span>
						<span class="list-r">{{ info.green}}  </span>
					</li>
					
					<li >
						<span class="list-l">拿地时间</span>
						<span class="list-r">{{ info.land_date}}  </span>
					</li>
					
					<li >
						<span class="list-l">建筑类型</span>
						<span class="list-r">{{ info.buildType}}  </span>
					</li>
					
					<li >
						<span class="list-l">产权年限</span>
						<span class="list-r">{{ info.property}}  </span>
					</li>
					
					<li >
						<span class="list-l">容积率</span>
						<span class="list-r">{{ info.volume}}  </span>
					</li>
					
					<li >
						<span class="list-l">车位情况</span>
						<span class="list-r">{{ info.car}}  </span>
					</li>
				</ul>
			</view>
		</view>

		<view class="bd">
			<view class="hd">
				<view class="info-tit">
					<h3>建筑信息</h3>
				</view>
				<ul class="infor-list">
					<li >
						<span class="list-l">物流公司</span>
						<span class="list-r">{{ info.property_company }} </span>
					</li>
					<li >
						<span class="list-l">物业费</span>
						<span class="list-r">{{ info.property_price }} </span>
					</li>
					<li >
						<span class="list-l">水电煤气</span>
						<span class="list-r">{{ info.gas }} </span>
					</li>
				</ul>
			</view>
		</view>
		
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				loupan_id:0,
				info:[],
				table:[
					{tite:"开盘时间 :", near:"2020-03-03" },
					{tite:"交房时间 :", near:"2020-03-03" },
					{tite:"预售许可证 :", near:"" },
				],
				architecture:[
					{tite:"开 发 商 :", near:"" },
					{tite:"绿 化 率 :", near:"35%" },
					{tite:"拿地时间 :", near:"2018年1月" },
					{tite:"建筑类型 :", near:"" },
					{tite:"产权年限 :", near:"40年" },
					{tite:"容 积 率 :", near:"2.8" },
					{tite:"车位情况 :", near:"" },
				],

				real:[
					{tite:"物流公司 :", near:"绿化物业" },
					{tite:"物 业 费 :", near:"5.6元/平米" },
					{tite:"水电燃气 :", near:"商用电(1.2元) 商用水(4元)" },
				],

			}
		},
		onLoad:function(e){
			this.loupan_id = e.loupan_id;
			let _this = this;
			this.$api.getPageLoupanDetails({
					loupan_id:_this.loupan_id,
				},
				res => {
					_this.info = res.info;
					console.log(_this.info);
				}
			);
			
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.house-detail-info{
		/* background: #fff; */
	}
	.haed{
		/* margin: 0 2rem 0 2rem; */
		padding-top: 40rpx;
		background: #fff;
	
	}
	.tite{
		height: 56rpx;
		display: flex;
	}
	.tite>h2{
		color: #3e4a59;
    	font-weight: 700;
		font-size: 44rpx;
		margin-left: 40rpx;
	}
/* 	.tite>span{
		height: 36upx;
		margin-left: 20upx;
		margin-top: 12upx;
		padding: 0 10upx;
		background: #0ad487;
		font-size: 24upx;
		color: #fff;
		border-radius: 4upx;
	} */
	
	.sale-one{
		height: 36rpx;
		margin-left: 20rpx;
		margin-top: 12rpx;
		padding: 10rpx;
		background: #0ad487;
		font-size: 24rpx;
		color: #fff;
		border-radius: 4rpx;
	}
	
	.sale-two{
		height: 36rpx;
		margin-left: 20rpx;
		margin-top: 12rpx;
		padding: 10rpx;
		background: #47B3E3;
		font-size: 24rpx;
		color: #fff;
		border-radius: 4rpx;
	}
	
	.sale-three{
		height: 36rpx;
		margin-left: 20rpx;
		margin-top: 12rpx;
		padding: 10rpx;
		background: #A9BACF;
		font-size: 24rpx;
		color: #fff;
		border-radius: 4rpx;
	}
	
	.bd{
		padding-bottom:40rpx;
		background: #fff;
		
	}
	.hd{
		margin: 0 40rpx 0 40rpx;
		/* padding-top:1rem; */
	}
	.info-tit{
		margin-top: 40rpx;
	}
	.info-tit>h3{
		padding-top:40rpx;
	}

	.infor-list>li{
		padding: 24rpx 0;
		border-bottom: 2rpx solid #e2e9f0;
	}
	.list-l{
		color: #77808a;

	}
	.list-r{
		margin-left: 20rpx;		
		color: #333;
		width: 510rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.text{
	
		float:right;
		margin-right: 26rpx;
	}
	.int{
		color: #fa5f35;
		font-size: 40rpx;
		font-weight: 550;
	}
	.mo{
		color: #fa5f35;
		font:24rpx;
	}
	.iot{
		font-size: 40rpx;
		font-weight: 550;
	}
	/* .qing{
		list-style: none !important;
	} */

	.bd1{
		margin-top:40rpx;
	}
</style>
